<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">

    <h:body>
        <ui:composition template="./templates/template.xhtml">

            <ui:define name="resources">
                <!--                infiniteCarousel{-->
                <script type="text/javascript" src="js/infiniteCarousel/jquery.infinitecarousel.js"></script>
                <script type="text/javascript">
                    $(function(){
                        $('#carousel').infiniteCarousel({
                            displayTime: 6000,
                            textholderHeight : .25
                        });
                    });
                </script>
                <style type="text/css">
                    body {
                        padding-top: 50px;
                    }
                    #carousel {
                        margin: 0 auto;
                        width: 100%;
                        height: 190px;
                        padding: 0;
                        overflow: scroll;
                        border: 2px solid #999;
                    }
                    #carousel ul {
                        list-style: none;
                        width: 1500px;
                        margin: 0;
                        padding: 0;
                        position: relative;
                    }
                    #carousel li {
                        display: inline;
                        float: left;
                    }

                    #carousel li img {
                        width: 796px;
                        height: 310px;
                    }
                    .textholder {
                        text-align: left;
                        font-size: small;
                        padding: 6px;
                        border-radius: 6px 6px 0 0;	
                    }
                </style>
                <!--                }infiniteCarousel-->
                <script type="text/javascript" src="javascript/prototype.js"></script>
                <script type="text/javascript" src="javascript/scriptaculous.js?load=effects"></script>
                <script type="text/javascript" src="javascript/lightwindow.js"></script>
                <link rel="stylesheet" href="css/lightwindow.css" type="text/css" media="screen" />
            </ui:define>

            <ui:define name="content">    
                <!--
                                <div id="_title">
                                    HOME
                                </div>
                -->


                <div id="_title">
                    HOME
                </div>

                <div id="_carousel">
                    <a title="YouTube: 300 Preview" params="lightwindow_width=425,lightwindow_height=340,lightwindow_loading_animation=false" class="lightwindow" href="http://www.youtube.com/v/uhi5x7V3WXE" rel=""><strong>You Tube</strong> - 300 Preview</a>
                    <div id="carousel">
                        <ul>
                            <li>
                                <a class="various" title="Lorem ipsum dolor sit amet" 
                                   href="http://www.youtube.com/embed/L9szn1QQfas?autoplay=1">
                                    <img alt="" src="./js/nivo-slider/demo/images/up.jpg" />
                                    <p>Lorem ipsum dolor sit amet<br/> jsdklfjlsd jlsdjflsdj lsdjfl ksj</p>
                                </a>
                            </li>

                            <li>
                                <a class="various" title="Lorem ipsum dolor sit amet" 
                                   href="http://www.youtube.com/embed/L9szn1QQfas?autoplay=1">
                                    <img alt="" src="./js/nivo-slider/demo/images/toystory.jpg"/>
                                    <p> kdjsdfslkj ksdjfklsjd <br/> Lorem ipsum dolor sit amet</p>
                                </a>
                            </li>

                            <li>
                                <a class="various" title="Lorem ipsum dolor sit amet" 
                                   href="http://www.youtube.com/embed/L9szn1QQfas?autoplay=1">
                                    <img alt="" src="./js/nivo-slider/demo/images/nemo.jpg"/>
                                    <p> kdjsdfslkj ksdjfklsjd <br/> Lorem ipsum dolor sit amet</p>
                                </a>
                            </li>


                        </ul>
                    </div>
                </div>

                <div style="font-weight: bold;padding: 10px;">
                    Actualities/New Feeds
                </div>

                <div class="content_item">
                    <p> <span style="color: #820015;"> MA DJs at Sheraton hotel</span> 
                        DMA Djs are joining the resident band at Sheraton 
                        and will perform before the band, during band breaks
                        and after the band to continue the party until 2am 
                        (Every Friday and Saturday)</p>
                    <p style="text-align: right; padding-right: 10px;color: #820015;">                            
                        &raquo; read more                            
                    </p>
                </div>

                <div class="content_item">
                    <p> <span style="color: #820015;"> 
                            Dj Kenny &amp; Dj Hiwatts renew contract with Park Hyatt Saigon 
                        </span>
                        Dj Kenny is one of DMA most promising Dj after only 6 months 
                        of training he is resident Dj with Dj Hiwatts (DMA Teacher) at the
                        “2 Lam Son Bar”, one of the A-Class Bar in Ho Chi Minh City (Every 
                        Thursday, Friday and Saturday)
                    </p>
                    <p style="text-align: right; padding-right: 10px;color: #820015;">                            
                        &raquo; read more                            
                    </p>
                </div>

                <div class="content_item">
                    <p> <span style="color: #820015;"> 
                            Audition for “Lush” Club 
                        </span> 
                        DMA is looking for 2 Djs for a resident job at the famous “Lush” Club.
                        Contact us if you wish to join the audition first week of April
                    </p>
                    <p style="text-align: right; padding-right: 10px;color: #820015;">                            
                        &raquo; read more                            
                    </p>
                </div>
                <div style="display: none">
                    <p:lightBox>  
                        <h:outputLink value="http://vimeo.com/moogaloop.swf?clip_id=18079550">  
                            <img alt="" src="./js/nivo-slider/demo/images/toystory.jpg"/>
                        </h:outputLink>  

                        <f:facet name="inline">  
                            <p:media value="http://vimeo.com/moogaloop.swf?clip_id=18079550"  width="400" height="225"  player="flash"/>  
                        </f:facet>  
                    </p:lightBox>
                </div>
            </ui:define>
        </ui:composition>
    </h:body>
</html>



<!--
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:dm="http://java.sun.com/jsf/composite/dma"
      xmlns:f="http://java.sun.com/jsf/core">
    <h:head>
        <title>Facelet Title</title>
        <link href="./css/style.css" 
              media="screen" type="text/css" rel="stylesheet"/>



    </h:head>
    <h:body>
        <div id="_center">
            <p:spacer height="4px"/>
            <div id="_header">
                <img src="./images/logo.png"/>
                <dm:menu/>
            </div>
            <p:spacer height="8px"/>
            <div id="_body">
                <div id="_container">

                </div>

                <div id="_right_container">
                    <dm:signIn/>
                    <p:spacer height="5px"/>
                    <div id="_right_panel">
                        <div style="padding: 5px; border-bottom:  solid 1px buttonface; border-radius: 8px 8px 0 0;
                             text-align: center; font-weight: bold; font-size: 16px;">
                            Online Support &nbsp;&nbsp;
                        </div>
                        <div style="padding: 10px 10px 0 20px;">

                            <a href="ymsgr:sendim?YAHOO_ID_HERE" border="0">
                                <img src="http://opi.yahoo.com/online?u=visaoiu&amp;t=1"/>
                            </a>

                            &nbsp;&nbsp; &nbsp;&nbsp; Mr. Hiep
                        </div>
                        <div style="padding: 10px 10px 0 20px;">
                            <a href="ymsgr:sendim?YAHOO_ID_HERE" border="0">
                                <img src="http://opi.yahoo.com/online?u=visaoiu&amp;t=1"/>
                            </a>

                            &nbsp;&nbsp; &nbsp;&nbsp; Mr. Nam
                        </div>

                    </div>
                </div>
            </div>

            <div id="_footer">
                <dm:backgroundMusic/>
            </div>
        </div>
    </h:body>
</html>
-->
